<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text">
    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>
  <script>
    var inputEl = document.querySelector("input")
    inputEl.onfocus = function () {
      console.log("获取焦点")
    }
    inputEl.onblur = function () {
      console.log("失去焦点")
    }

    inputEl.oninput = function () {
      console.log("oninput正在输入内容:" + inputEl.value)
    }
    inputEl.onchange = function () {
      console.log("change事件内容发生改变", inputEl.value)
    }

    var formEl = document.querySelector("form")
    formEl.onreset = function (event) {
      console.log("发生了重置事件")
      event.preventDefault()
    }
    formEl.onsubmit = function (event) {
      console.log("发生了提交事件")
      event.preventDefault()
    }

  </script>
</body>

</html>